<template>
    <div>
        <!-- 地图容器 -->
        <div ref="mapBox" style="height: 100%;"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Title from './Title.vue';
const mapBox = ref(null);
// 封装一个加载地图函数
const loadMap = () => {
    AMapLoader.load({
        key: "a3e89ced5f8e4eb3b485654a2664d7b9", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            //加载地图实例
            const map = new AMap.Map(mapBox.value, {
                pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -15, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [120.959365,31.911361],
                terrain: true, //开启地形图//初始地图中心经纬度
                // mapStyle: "amap://styles/darkblue",
            });
            const position = new AMap.LngLat(120.959365,31.911361); //Marker 经纬度
            const marker = new AMap.Marker({
                position: position,
                title: '上海'
            });
            map.add(marker);
            const traffic = new AMap.TileLayer.Traffic({
                autoRefresh: true, //是否自动刷新，默认为false
                interval: 180, //刷新间隔，默认180s
            });
            map.add(traffic); //通过add方法添加图层
        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
};
onMounted(() => {
    loadMap()
});
</script>
<style lang="less" scoped></style>